<template>
  <div class="hello">
    <div>聊天</div>
    <div class="main">
        <div :class="['msgview',item.id=='auto'?'center0':'']" v-for="item in listarr" >
            <span :class="['left',item.id=='123'?'fright':'',item.id=='auto'?'center1':'']">{{item.name}}</span>
            <span :class="['msgcontent',item.id=='123'?'fright':'',item.id=='auto'?'center2':'']">{{item.msg}}</span>
        </div>
    </div>
    <div>
        <i-input class="inputear" v-model="psotmsg" type="textarea" :rows="4" placeholder="请输入..."></i-input>
        <i-button @click="postmsgbtn" class="posbtn">发送</i-button>
    </div>
    <div>
        <i-button @click="testbtn">测试</i-button>
        <i-button @click="gojump">跳转</i-button>
        <i-button>open</i-button>
        你的姓名：<i-input v-model="psotname"> </i-input>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      value:0,
      test:"",
      listarr:[
          {msg:"第一条记录",name:"张三"},
          {msg:"第二条记录",name:"李四"},
          {msg:"第三条记录",name:"王五"}
      ],
      psotmsg:"",
      psotname:"自己",
    }
  },
  components: {

  },
    methods: {
    postmsgbtn(){
        console.log(this.psotmsg);
        this.psotmsg?
        this.gotopost():
        this.$Message.info('请输入信息');
    },
        gotopost(){
            this.listarr.push({msg:this.psotmsg,name:this.psotname,id:"123"})
            this.listarr.push({msg:"你好,这是一条自动回复消息",name:"机器人",id:"auto"})
        },
    testbtn(){
        // console.log($(".main").html());
        $.ajax({
            type: "post",
            dataType: "html",
            url: '/Resources/GetList.ashx',
            data: "dataurl",
            success: function (data) {
                console.log(data);
            }
        });
    },
    gojump(){
        this.$router.push("/newpage1")
    }
  },
  created() {
      console.log("ready");
      var ws = new WebSocket("ws://localhost:8080/WebSocketTest/webSocket");

            ws.onclose = function(message) {

            };
            ws.onmessage = function(message) {
                showMessage(message.data);
            };
            console.log("sss")
  },
  ready(){

  }
//   watch:{
//       listarr(){
//         this.listarr.push({msg:"你好,这是一条自动回复消息",name:"机器人",id:"auto"})
//       }
//   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hello{
        border: 1px solid #ddd;
        margin: 50px;
        padding: 10px;
    }
    .inputear{
        width:80%;
        height: 200px;
    }
    .main{
        height: 500px;
        border: 1px solid #ddd;
        margin-bottom: 10px;
        overflow: overlay;
        padding:20px;
    }
    .msgview{
        line-height: 2rem;
        overflow: hidden;
        margin:20px;
    }
    .left{
        background: #ddd;
        padding: 5px;
        border-radius: 50%;
        float:left;
    }
    .msgcontent{
        float:left;
        background: #ddd;
        padding: 5px;
        border-radius: 10px;
        margin-left:20px;margin-right:20px;
    }
    .posbtn{
        width: 15%;
        padding: 40px;
        vertical-align: text-bottom;
    }
    .fright{
        float: right;
    }
    .center1{
        border-radius: 10px 0px 0px 10px;
        text-align: center;
    }
    .center2{
         border-radius: 0px 10px 10px 0px;
         text-align: center;
         margin:0px;
    }
    .center0{
        padding-left: 12rem;
    }
</style>
